<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
             <el-row style="margin-bottom:20px;">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">系统管理</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <font color="#A1FEDB" size="4">用户管理</font>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-row>
            <el-row>
                <el-tabs
              tab-position="top"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="用户管理" name="first">
                <el-row>
                  <div>
                    <el-row>
                      <el-col :span="24">
                        <el-row>
                          <span
                            style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                            >用户管理</span
                          >
                        </el-row>
                        <div id="table13">
                          <el-table
                            :data="tableData5"
                            style="width: 100%"
                            height="700px"
                            :row-style="getRowClass"
                            :header-row-style="getRowClass"
                            :header-cell-style="getRowClass2"
                            @cell-mouse-enter="changerow"
                          >
                            <el-table-column prop="id" label="序号">
                            </el-table-column>
                            <el-table-column prop="account" label="账号">
                            </el-table-column>
                            <el-table-column prop="password" label="密码">
                            </el-table-column>
                            <el-table-column prop="role" label="角色">
                            </el-table-column>
                            <el-table-column prop="regtime" label="修改时间">
                            </el-table-column>
                            <el-table-column label="操作">
                              <template slot-scope="scope">
                                <el-button
                                  size="mini"
                                  @click="handleEdit(scope.$index, scope.row)"
                                  >修改</el-button
                                >
                                <el-button
                                  size="mini"
                                  type="danger"
                                  @click="handleDelete(scope.$index, scope.row)"
                                  >删除</el-button
                                >
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="新增用户" name="second">
                <el-row>
                  <div>
                    <el-row>
                      <el-col :span="24">
                        <el-row>
                          <span
                            style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                            >新增用户</span
                          >
                        </el-row>
                        <div id="table14">
                          <el-form
                            :label-position="labelPosition"
                            label-width="80px"
                            :model="formLabelAlign2"
                            :rules="rules"
                            ref="ruleForm"
                            class="demo-ruleForm"
                            height="1000px"
                            style="margin-right:10rem;margin-left:10rem;"
                          >
                            <el-form-item
                              class="formitem2"
                              label="账号:"
                              prop="account"
                            >
                              <el-input
                                v-model="formLabelAlign2.account"
                              ></el-input>
                            </el-form-item>
                            <el-form-item
                              class="formitem2"
                              label="密码:"
                              prop="password"
                            >
                              <el-input
                                v-model="formLabelAlign2.password"
                              ></el-input>
                            </el-form-item>
                            <el-form-item
                              class="formitem2"
                              label="确认密码:"
                              prop="password2"
                            >
                              <el-input
                                v-model="formLabelAlign2.password2"
                              ></el-input>
                            </el-form-item>
                            <el-form-item class="formitem2" label="角色:">
                              <el-select
                                v-model="formLabelAlign2.role"
                                placeholder="请选择角色"
                              >
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-form>
                          <span slot="footer" class="dialog">
                            <el-button @click="dialogVisible = false"
                              >取 消</el-button
                            >
                            <el-button
                              type="primary"
                              @click="adduser('ruleForm')"
                              >确定</el-button
                            >
                          </span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
              </el-tab-pane>
            </el-tabs>
            </el-row>
          
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
    <el-dialog
      title="修改用户信息："
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item class="formitem" label="账号:">
          <el-input v-model="formLabelAlign.account"></el-input>
        </el-form-item>
        <el-form-item class="formitem" label="密码:">
          <el-input v-model="formLabelAlign.password"></el-input>
        </el-form-item>

        <el-form-item class="formitem" label="角色:">
          <el-select v-model="formLabelAlign.role" placeholder="请选择角色">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeuser()">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    var checkAccount = (rule, value, callback) => {
      if (value.length < 4 || value.length > 10) {
        callback(
          new Error('账号的字符串长度为4~10位，您输入有误，请重新输入！')
        )
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value.length < 6 || value.length > 10) {
        callback(new Error('密码的长度要求为6~10位'))
      } else {
        if (this.formLabelAlign2.password2 !== '') {
          this.$refs.ruleForm.validateField('password2')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formLabelAlign2.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      labelPosition: 'right',
      dialogVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        // account: '',
        // password: '',
        // role: ''
      },
      formLabelAlign2: {
        account: '',
        password: '',
        password2: '',
        role: ''
      },
      rules: {
        account: [{ validator: checkAccount, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        password2: [{ validator: validatePass2, trigger: 'blur' }]
      },
      tableData5: [
        {
          // name1: '',
          // name2: '',
          // name3: '',
          // name4: '',
          // name5: ''
        }
      ],
      options: [
        {
          value: '管理员',
          label: '管理员'
        },
        {
          value: '运维员',
          label: '运维员'
        },
        {
          value: '值班员',
          label: '值班员'
        }
      ],
      value: '',
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      activeIndex: '3',

      activeName: 'first',
      activeName2: '1'
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {},

  mounted() {
    this.readuser()
  },

  methods: {
    //新增用户
    adduser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let user = this.$qs.parse({
            account: this.formLabelAlign2.account,
            password: this.formLabelAlign2.password,
            role: this.formLabelAlign2.role
          })
          this.$axios({
            headers: {
              Authorization: ' ',
              'content-Type': 'application/json;charset=UTF-8'
              //  Accept: 'application/json;charset=UTF-8'
            },
            method: 'post',
            url: 'http://127.0.0.1:8082/user/adduser',
            data: user
          }).then(res => {
            this.$message.success('新增成功')
            this.formLabelAlign2 = {}
            this.readuser()
            console.log(res.data)
          })
        } else {
          this.$message.error('您输入的信息有误，请重新输入！')
          console.log('error submit!!')
          return false
        }
      })
    },
    //修改用户信息
    changeuser() {
      let user = this.$qs.parse({
        id: this.formLabelAlign.id,
        account: this.formLabelAlign.account,
        password: this.formLabelAlign.password,
        role: this.formLabelAlign.role
      })
      this.$axios({
        headers: {
          Authorization: ' ',
          'content-Type': 'application/json;charset=UTF-8'
          //  Accept: 'application/json;charset=UTF-8'
        },
        method: 'post',
        url: 'http://127.0.0.1:8082/user/changeuser',
        data: user
      }).then(res => {
        this.$message.success('修改成功')
        this.dialogVisible = false
        this.readuser()
        console.log(res.data)
      })
    },
    //修改用户信息
    handleEdit(index, row) {
      this.dialogVisible = true
      this.formLabelAlign = this.tableData5[index]
    },
    //删除用户信息
    handleDelete(index, row) {
      this.$axios({
        method: 'get',
        params: {
          id: this.tableData5[index].id
        },
        url: 'http://127.0.0.1:8082/user/deleteuser'
      }).then(res => {
        console.log(res.data)
        this.tableData5.pop(index)
        this.$message.success('删除成功')
      })
    },
    readuser() {
      this.$axios({
        method: 'get',
        // params: {
        //   name: '系统结构'
        // },
        url: 'http://127.0.0.1:8082/user/searchall'
      }).then(res => {
        console.log(res.data)
        this.tableData5 = res.data
        for (let i = 0; i < res.data.length; i++) {
          this.tableData5[i].password = '********'
        }
      })
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    getRowClass3({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#F50C0C;'
      return 'background:#050E11;color:#18EFF2;'
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss">
.formitem .el-form-item__label {
  color: #020202;
}
.formitem2 .el-form-item__label {
  color: #ffffff;
}
.el-tabs {
  width: 100%;
  color: white;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
.el-table {
  background-color: #032121;
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
}
.dialog {
  margin-left: 70%;
}
#topology-canvas {
  width: 99%;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}

#table13 {
  width: 99%;
  // height: 333px;
  //
  background-image: url(../../assets/images/新UI16.png);
}
#table14 {
  width: 50%;
  height: 643px;
  margin-left: 20%;
  padding-top: 6rem;
  // -right: 6rem;
  background-image: url(../../assets/images/新UI16.png);
  background-size: 100% 100%;
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
